<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业完成情况 - 课翼管家</title>
    <script src="js/tailwindcss_3.4.17.js"></script>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F97316',
                        danger: '#EF4444',
                        neutral: '#64748B',
                        sun: '#FFB800',
                        moon: '#94A3B8',
                        star: '#FBBF24',
                        trophy: '#C9B037',
                        gold: '#FFD700',
                        silver: '#E5E7EB',
                        bronze: '#CD7F32',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .slide-right {
                animation: slideRight 0.5s ease-out;
            }
            .slide-left {
                animation: slideLeft 0.5s ease-out;
            }
            .scale-in {
                animation: scaleIn 0.3s ease-out;
            }
            .scale-out {
                animation: scaleOut 0.3s ease-in;
            }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideRight {
            from {
                transform: translateX(-20px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideLeft {
            from {
                transform: translateX(20px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes scaleIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes scaleOut {
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(0.8);
                opacity: 0;
            }
        }
        .student-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .student-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* 学生标签样式 */
        .student-tag {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .student-tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .student-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            min-height: 200px;
        }
    </style>
</head>

<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 顶部导航 -->
    <header class="bg-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex flex-wrap justify-between items-center gap-3">
            <h1 class="text-xl md:text-2xl font-bold flex items-center">
                <i class="fa fa-book mr-2"></i>
                <span>作业完成情况</span>
            </h1>
            <div class="flex flex-wrap gap-2">
                <button id="refreshBtn" class="bg-white text-primary hover:bg-gray-100 px-4 py-2 rounded-lg font-medium flex items-center transition-all">
                    <i class="fa fa-refresh mr-2"></i>
                    <span>刷新数据</span>
                </button>
                <button id="editHomeworkBtn" class="bg-accent hover:bg-accent/90 text-white px-4 py-2 rounded-lg font-medium flex items-center transition-all">
                    <i class="fa fa-pencil mr-2"></i>
                    <span>修改作业</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 作业信息 -->
    <section class="container mx-auto px-4 py-4">
        <div class="bg-white rounded-xl shadow p-4 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fa fa-file-text-o text-primary text-xl mr-2"></i>
                <h2 id="currentHomework" class="text-lg font-semibold text-gray-800">当前作业：暂无作业</h2>
            </div>
            <div class="flex gap-2">
                <div class="bg-gray-100 rounded-lg px-3 py-1 flex items-center">
                    <i class="fa fa-users text-primary mr-1"></i>
                    <span class="text-sm text-gray-700">总人数: <span id="totalCount">0</span></span>
                </div>
                <div class="bg-gray-100 rounded-lg px-3 py-1 flex items-center">
                    <i class="fa fa-check-circle text-secondary mr-1"></i>
                    <span class="text-sm text-gray-700">已完成: <span id="completedCount">0</span></span>
                </div>
                <div class="bg-gray-100 rounded-lg px-3 py-1 flex items-center">
                    <i class="fa fa-clock-o text-accent mr-1"></i>
                    <span class="text-sm text-gray-700">未完成: <span id="pendingCount">0</span></span>
                </div>
            </div>
        </div>
    </section>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 左右两栏布局 - 使用学生标签样式 -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 左侧：未完成作业学生 -->
            <div class="flex-1 bg-white rounded-xl shadow p-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fa fa-clock-o text-accent mr-2"></i>
                        未完成作业
                    </h3>
                    <div class="bg-accent/10 text-accent px-3 py-1 rounded-full text-xs flex items-center">
                        <i class="fa fa-users mr-1"></i>
                        <span id="pendingStudentsCount">0 人</span>
                    </div>
                </div>
                <div id="pendingStudentsList" class="student-tags-container p-2">
                    <!-- 未完成作业的学生标签将通过JS动态生成 -->
                    <div class="w-full text-center py-8 text-neutral">
                        <i class="fa fa-check-circle text-4xl mb-3 text-secondary"></i>
                        <p>所有学生都已完成作业</p>
                    </div>
                </div>
            </div>

            <!-- 右侧：已完成作业学生 -->
            <div class="flex-1 bg-white rounded-xl shadow p-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fa fa-check-circle text-secondary mr-2"></i>
                        已完成作业
                    </h3>
                    <div class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs flex items-center">
                        <i class="fa fa-users mr-1"></i>
                        <span id="completedStudentsCount">0 人</span>
                    </div>
                </div>
                <div id="completedStudentsList" class="student-tags-container p-2">
                    <!-- 已完成作业的学生标签将通过JS动态生成 -->
                    <div class="w-full text-center py-8 text-neutral">
                        <i class="fa fa-clock-o text-4xl mb-3 text-accent"></i>
                        <p>暂无已完成作业的学生</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 作业修改模态框 -->
    <div id="homeworkModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
            <div class="p-6 bg-primary text-white">
                <h3 class="text-xl font-bold flex items-center">
                    <i class="fa fa-pencil mr-2"></i>
                    修改作业
                </h3>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label for="homeworkInput" class="block text-sm font-medium text-gray-700 mb-1">
                        作业内容
                    </label>
                    <input type="text" id="homeworkInput" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                           placeholder="请输入作业内容">
                </div>
                <div class="flex gap-3">
                    <button id="cancelHomeworkEdit" 
                            class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300 transition-all">
                        取消
                    </button>
                    <button id="confirmHomeworkEdit" 
                            class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-all">
                        确认
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 返回主页按钮 -->
    <div class="fixed bottom-4 right-4">
        <button id="backToHomeBtn" 
                class="bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all">
            <i class="fa fa-home text-xl"></i>
        </button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从localStorage获取学生数据
            function getStudentsData() {
                try {
                    const data = localStorage.getItem('studentRatings');
                    return data ? JSON.parse(data) : [];
                } catch (error) {
                    console.error('获取学生数据失败:', error);
                    return [];
                }
            }

            // 全局变量存储作业完成情况数据
            let homeworkCompletionData = {};

            // 获取作业完成情况数据（现在不保存，每次刷新都重新记录）
            function getHomeworkCompletionData() {
                return homeworkCompletionData; // 返回内存中的数据
            }

            // 保存作业完成情况数据到内存中
            function saveHomeworkCompletionData(data) {
                homeworkCompletionData = data; // 保存到内存变量中
                return true;
            }

            // 获取当前作业名称
            function getCurrentHomework() {
                try {
                    const data = localStorage.getItem('currentHomework');
                    return data || '暂无作业';
                } catch (error) {
                    console.error('获取当前作业失败:', error);
                    return '暂无作业';
                }
            }

            // 保存当前作业名称
            function saveCurrentHomework(homework) {
                try {
                    localStorage.setItem('currentHomework', homework);
                    return true;
                } catch (error) {
                    console.error('保存当前作业失败:', error);
                    return false;
                }
            }

            // 生成学生标签HTML
            function generateStudentTag(student, isCompleted) {
                const tagClass = isCompleted ? 'bg-secondary text-white' : 'bg-white border border-gray-200 text-gray-800';
                const completionIcon = isCompleted ? 'fa-check-circle mr-1' : 'fa-circle-o mr-1';
                const completionStatus = isCompleted ? '已完成' : '未完成';
                const statusBadgeClass = isCompleted ? 'bg-white/20 text-white' : 'bg-gray-100 text-gray-700';
                
                return `
                    <div class="student-tag ${tagClass} rounded-full px-3 py-1.5 text-sm flex items-center justify-between gap-2 shadow-sm fade-in scale-in" data-id="${student.id}">
                        <div class="flex items-center gap-1.5">
                            <span class="font-medium">${student.name}</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                
                            <span class="${statusBadgeClass} text-xs px-1.5 py-0.5 rounded-full">${completionStatus}</span>
                            <button class="complete-btn text-xs opacity-80 hover:opacity-100 transition-opacity" title="切换完成状态">
                                <i class="fa ${completionIcon}"></i>
                            </button>
                        </div>
                    </div>
                `;
            }

         
            // 播放音效
            function playSound() {
                try {
                    const audio = new Audio('mp3/success.wav');
                    audio.volume = 0.6;
                    audio.play().catch(error => {
                        console.log('音效播放错误:', error);
                    });
                } catch (error) {
                    console.log('音效播放错误:', error);
                }
            }

            // 打开作业修改模态框
            function openHomeworkModal() {
                const currentHomework = getCurrentHomework();
                document.getElementById('homeworkInput').value = currentHomework === '暂无作业' ? '' : currentHomework;
                document.getElementById('homeworkModal').classList.remove('hidden');
            }

            // 关闭作业修改模态框
            function closeHomeworkModal() {
                document.getElementById('homeworkModal').classList.add('hidden');
            }

            // 保存作业修改
            function saveHomework() {
                const homeworkInput = document.getElementById('homeworkInput').value.trim();
                if (homeworkInput) {
                    if (saveCurrentHomework(homeworkInput)) {
                        document.getElementById('currentHomework').textContent = `当前作业：${homeworkInput}`;
                        closeHomeworkModal();
                        
                        // 显示保存成功的提示
                        showToast('作业已更新');
                        
                        // 重置作业完成情况
                        renderStudentsLists();
                    }
                } else {
                    alert('请输入作业内容');
                }
            }

            // 显示提示消息
            function showToast(message) {
                const toast = document.createElement('div');
                toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg fade-in';
                toast.textContent = message;
                document.body.appendChild(toast);
                
                // 3秒后移除提示
                setTimeout(() => {
                    toast.classList.add('scale-out');
                    setTimeout(() => {
                        document.body.removeChild(toast);
                    }, 300);
                }, 3000);
            }

            // 渲染学生标签列表
            function renderStudentsLists() {
                const students = getStudentsData();
                const completionData = getHomeworkCompletionData();
                
                const pendingStudents = students.filter(student => !completionData[student.id]);
                const completedStudents = students.filter(student => completionData[student.id]);
                
                const pendingListContainer = document.getElementById('pendingStudentsList');
                const completedListContainer = document.getElementById('completedStudentsList');
                
                // 清空列表
                pendingListContainer.innerHTML = '';
                completedListContainer.innerHTML = '';
                
                // 渲染未完成作业的学生标签
                if (pendingStudents.length === 0) {
                    pendingListContainer.innerHTML = `
                        <div class="text-center py-8 text-neutral">
                            <i class="fa fa-check-circle text-4xl mb-3 text-secondary"></i>
                            <p>所有学生都已完成作业</p>
                        </div>
                    `;
                } else {
                    // 按照姓名排序显示未完成学生标签
                    pendingStudents.sort((a, b) => a.name.localeCompare(b.name)).forEach(student => {
                        const tagHtml = generateStudentTag(student, false);
                        pendingListContainer.innerHTML += tagHtml;
                    });
                }
                
                // 渲染已完成作业的学生标签
                if (completedStudents.length === 0) {
                    completedListContainer.innerHTML = `
                        <div class="text-center py-8 text-neutral">
                            <i class="fa fa-clock-o text-4xl mb-3 text-accent"></i>
                            <p>暂无已完成作业的学生</p>
                        </div>
                    `;
                } else {
                    // 按照姓名排序显示已完成学生标签
                    completedStudents.sort((a, b) => a.name.localeCompare(b.name)).forEach(student => {
                        const tagHtml = generateStudentTag(student, true);
                        completedListContainer.innerHTML += tagHtml;
                    });
                }
                
                // 更新统计数据
                updateStatistics(students, pendingStudents, completedStudents);
                
                // 添加事件监听
                addEventListeners();
            }

            // 更新统计数据
            function updateStatistics(students, pendingStudents, completedStudents) {
                document.getElementById('totalCount').textContent = students.length;
                document.getElementById('pendingCount').textContent = pendingStudents.length;
                document.getElementById('completedCount').textContent = completedStudents.length;
                document.getElementById('pendingStudentsCount').textContent = `${pendingStudents.length} 人`;
                document.getElementById('completedStudentsCount').textContent = `${completedStudents.length} 人`;
            }

            // 添加事件监听
            function addEventListeners() {
                // 完成/未完成按钮点击事件
                document.querySelectorAll('.complete-btn').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation(); // 阻止事件冒泡到父元素
                        toggleStudentCompletion(this);
                    });
                });
                
                // 为学生标签本身添加点击事件
                document.querySelectorAll('.student-tag').forEach(tag => {
                    tag.addEventListener('click', function() {
                        toggleStudentCompletion(this);
                    });
                });
                
                // 切换学生完成状态的函数
                function toggleStudentCompletion(element) {
                    // 同时支持卡片视图和标签视图
                    const studentElement = element.closest('.student-card, .student-tag');
                    const studentId = studentElement.dataset.id;
                    
                    // 检查完成状态
                    const isCompleted = studentElement.classList.contains('border-secondary') || studentElement.classList.contains('bg-secondary');
                      
                    // 更新完成情况数据
                    const completionData = getHomeworkCompletionData();
                    if (isCompleted) {
                        delete completionData[studentId];
                    } else {
                        completionData[studentId] = true;
                    }
                      
                    if (saveHomeworkCompletionData(completionData)) {
                        // 播放音效
                        playSound();
                          
                        // 重新渲染列表
                        renderStudentsLists();
                    }
                }
            }

            // 初始化页面
            function initPage() {
                // 设置当前作业
                const currentHomework = getCurrentHomework();
                document.getElementById('currentHomework').textContent = `当前作业：${currentHomework}`;
                
                // 渲染学生列表
                renderStudentsLists();
                
                // 事件监听
                document.getElementById('editHomeworkBtn').addEventListener('click', openHomeworkModal);
                document.getElementById('cancelHomeworkEdit').addEventListener('click', closeHomeworkModal);
                document.getElementById('confirmHomeworkEdit').addEventListener('click', saveHomework);
                document.getElementById('refreshBtn').addEventListener('click', renderStudentsLists);
                document.getElementById('backToHomeBtn').addEventListener('click', () => {
                    window.location.href = '星星.html';
                });
                
                // 点击模态框外部关闭模态框
                document.getElementById('homeworkModal').addEventListener('click', function(event) {
                    if (event.target === this) {
                        closeHomeworkModal();
                    }
                });
            }

            // 初始化页面
            initPage();
        });
    </script>
</body>

</html>